<template>
  <div id="wrapper">
    <my-header backBtn>
      <div slot="title">
        定位器功能介绍
      </div>
    </my-header>
    <div id="head">
      <img id="head_img" src="@/../static/img/gps_sug_functionIntroduction.png" />
    </div>
    <ul id="middle">
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_traceQuery.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（1）轨迹查询：</h2>
          <p>只需设定时间段，即可查询宝宝在此时间段内的活动走向和轨迹。</p>
        </div>
      </li>
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_secureFence.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（2）安全围栏：</h2>
          <p>设防状态下，宝宝移动超过设定范围，将会触发报警。</p>
        </div>
      </li>
      <li>
        <div class="middle_left_icon">
          <img src="@/../static/img/gps_sug_alert.png" alt="">
        </div>
        <div class="middle_right_text">
          <h2>（3）SOS警报：</h2>
          <p>紧急情况下，宝宝按下书包上的SOS按钮，会给家长发送报警信息进行求助，同时上传到服务器。</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "perSug",
}
</script>

<style scoped>
#wrapper {
  width: 100%;
  height: 100%;
  background-image: url("../../../static/img/gps_sug_background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#head {
  text-align: center;
}
#head_img {
  width: 90%;
  height: 90%;
  margin-top: 5%;
}
#middle {
  list-style-type: none;
}
#middle li {
  text-align: left;
  margin: 5% auto 0;
  width: 90%;
}
.middle_left_icon {
  display: inline-block;
  width: 25%;
}
.middle_left_icon img {
  width: 80%;
}
.middle_right_text {
  display: inline-block;
  text-align: left;
  width: 73%;
}
.middle_right_text h2 {
  font-weight: bold;
  position: relative;
  left: -2.5%;
}
.middle_right_text p {
  font-size: 14px;
}
</style>
